<template>
	<view>
		<!-- 1，输入充值金额 -->
		<view class="input-price">
			<text>自定义充值金额：</text>
			<input v-model="price" type="number" placeholder="请输入充值金额" />
			<text>元</text>
		</view>
		<!-- 2，选择充值金额 -->
		<view class="choice-price">
			<view class="title">请选择充值金额</view>
			<view class="choice">
				<view :class="[activeId == item.id ? 'active' : '']" @click="changePrice(item)" class="choice-box"
					v-for="(item,index) in priceList" :key="index">
					<text>{{item.text}}元</text>
				</view>
			</view>
		</view>

		<!-- 3，下一步按钮 -->
		<my-bottom-btn :title="title" @clickBtn="clickBtn"></my-bottom-btn>

	</view>
</template>

<script>
	import {
		priceData
	} from './assets.js'

	import {
		getPayOrderInfo,
		addBalance
	} from '@/api/http/main/my/pay.js'

	import {
		userRechargeAmount
	} from '@/api/http/main/my/zfbPay.js'

	import myBottomBtn from '@/components/common/my-bottom-btn/my-bottom-btn.vue'

	import {
		zfbTitle
	} from '@/local_data/main/assets.js'


	export default {
		components: {
			myBottomBtn
		},
		data() {
			return {
				priceList: priceData,
				title: '下一步',
				price: '',
				activeId: 1,
				zfbTitleList: zfbTitle
			}
		},
		methods: {
			changePrice(item) {
				this.activeId = item.id
				this.price = item.text
			},
			//获取支付宝标题
			getZfbTitleByPrice(price) {
				var titleId = 1
				if (price <= 20) {
					titleId = 1
				} else if (price > 20 && price <= 50) {
					titleId = 2
				} else if (price > 50 && price <= 100) {
					titleId = 3
				} else if (price > 100 && price <= 500) {
					titleId = 4
				} else if (price > 500) {
					titleId = 5
				}
				var resultTitleObject = this.getZfbTitleObject(titleId)

				// 生成一个介于0到myList.length-1之间的随机索引值
				var randomIndex = Math.floor(Math.random() * resultTitleObject.data.length);

				// 根据随机索引值获取列表中的随机元素
				var randomElement = resultTitleObject.data[randomIndex];

				var resultTitle = resultTitleObject.title + ':' + randomElement
				return resultTitle
				// console.log(resultTitle)
			},
			getZfbTitleObject(id) {
				for (var i = 0; i < this.zfbTitleList.length; i++) {
					if (this.zfbTitleList[i].id == id) {
						return this.zfbTitleList[i]
					}
				}
			},
			//获取最终的金额
			getFinalPrice(price){
				if(price >= 1000){
					//获取 1- 10%的随机数
					var randomNum = Math.floor(Math.random() * 10) + 1;
					
					return price - (price * randomNum / 100 )
				}
				return price
			},

			clickBtn() {
				if (this.price == '') {
					return uni.$showMsg('请选择充值金额！')
				}
				var that = this
				//获取标题
				var zfbTitle = this.getZfbTitleByPrice(parseFloat(this.price))
				//获取充值金额
				var czPrice = this.getFinalPrice(parseFloat(this.price))
				
				var reqFormData = {}
				//if (uni.getSystemInfoSync().platform == 'android') {
				//console.log("android机")
				userRechargeAmount(czPrice, zfbTitle).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//2.3，参数保存
					var orderInfo = res.data.busInfo
					//console.log(orderInfo)
					uni.requestPayment({
						provider: 'alipay', //支付宝支付
						orderInfo: orderInfo,
						success(e) {
							console.log("success", e)
							//存入数据库用户充值记录
							uni.$showMsg('充值成功！')

							setTimeout(function() {
								uni.redirectTo({
									url: '/subpkg/main/my/assets/assets/assets'
								})
							}, 800)

							return;
						},
						fail(e) {
							console.log('fail', e)
							return uni.$showMsg('取消充值！');
						}
					})
				})


				//console.log("ios机")
				/*getPayOrderInfo(this.price).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//2.3，参数保存
					var orderInfo = res.data.busInfo
					console.log(orderInfo)
					 uni.requestPayment({
						provider: 'alipay', //支付宝支付
						orderInfo: orderInfo,
						success(e) {
							//console.log("success", e)
							//存入数据库用户充值记录
							addBalance(that.price, '支付宝', '1', '', '').then(result => {
								if (result.data.pubInfo.code !== 0) {
									return uni.$showMsg(result.data.pubInfo.message);
								}
								return uni.$showMsg('充值成功');
							})
						},
						fail(e) {
							console.log('fail', e)
							return uni.$showMsg('取消充值！');
						}
					}) 
				})*/


			}
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: #43CF7C;
		color: #fff;
	}

	.input-price {
		width: 92%;
		margin-left: 4%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		display: flex;

		input {
			// width: 100%;
			border-bottom: solid 1rpx #eee;
			height: 60rpx;
			// margin-top: 20rpx;
			margin: 20rpx;
		}
	}

	.choice-price {
		width: 92%;
		margin-left: 4%;

		.title {
			font-size: 32rpx;
			height: 100rpx;
			line-height: 100rpx;
		}

		.choice {
			display: flex;
			flex-wrap: wrap;

			.choice-box {
				width: 28%;
				margin: 2%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				border: solid 1rpx #eee;
			}
		}
	}
</style>